<template>
  <span  class="cp pr">
    <span  ref='icon' @click="trigger" >
    <el-icon >
      <Setting />
    </el-icon>
    </span>

    <div  ref='dom'  class="pa set-table-select" v-show="show">
      <div class="set-table-check-all  df aic">
        <svg
        @click='selectAll'
         v-show='props.columns.length === checkedValue.length'
          t="1680232381484"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3606"
          width="16"
          height="16"
        >
          <path
            d="M853.32992 102.4H170.67008C133.13024 102.4 102.4 133.13024 102.4 170.67008v682.65984C102.4 890.86976 133.13024 921.6 170.67008 921.6h682.65984C890.86976 921.6 921.6 890.86976 921.6 853.32992V170.67008C921.6 133.13024 890.86976 102.4 853.32992 102.4zM457.8304 716.8L204.8 463.72864l48.27136-48.26112 204.75904 204.8L770.92864 307.2 819.2 355.47136 457.8304 716.8z"
            p-id="3607"
            fill="#1989fa"
          ></path>
        </svg>
        <svg
        @click='selectAll'
         v-show='props.columns.length !== checkedValue.length'
          t="1680232441416"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5287"
          width="16"
          height="16"
        >
          <path
            d="M806.4 213.333333H217.6a3.84 3.84 0 0 0-4.266667 4.266667v588.8a3.84 3.84 0 0 0 4.266667 4.266667h588.8a3.84 3.84 0 0 0 4.266667-4.266667V217.6a3.84 3.84 0 0 0-4.266667-4.266667zM853.333333 849.066667a4.693333 4.693333 0 0 1-4.693333 4.693333H174.933333a4.693333 4.693333 0 0 1-4.693333-4.693333V174.933333a4.693333 4.693333 0 0 1 5.12-4.266666H849.066667a4.693333 4.693333 0 0 1 4.693333 4.693333z"
            p-id="5288"
            fill="#cdcdcd"
          ></path>
        </svg>

        <span class="fs12 df aic">全选</span>
        <div class='pl10'>
          <el-input size='small' v-model.trim='filterValue'  placeholder="请输入"></el-input>
        </div>
      </div>

      <ul
        style="height: calc(100% - 70px); overflow: auto; margin-top: 0;"
        class="list-group"
      >
        <li
          @click="handleClick(item)"
          class="fs12 lh20 df aic"
          :key="item.label"
          :name='item.name '
          :style='{display:( (item.text || item.label || item.name).includes(filterValue)) ? "flex" : "none"}'
          v-for="(item) in props.columns"
        >
          <svg
            v-show="checkedValue.includes(item.name || item.text || item.label)"
            t="1680232381484"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3606"
            width="16"
            height="16"
          >
            <path
              d="M853.32992 102.4H170.67008C133.13024 102.4 102.4 133.13024 102.4 170.67008v682.65984C102.4 890.86976 133.13024 921.6 170.67008 921.6h682.65984C890.86976 921.6 921.6 890.86976 921.6 853.32992V170.67008C921.6 133.13024 890.86976 102.4 853.32992 102.4zM457.8304 716.8L204.8 463.72864l48.27136-48.26112 204.75904 204.8L770.92864 307.2 819.2 355.47136 457.8304 716.8z"
              p-id="3607"
              fill="#1989fa"
            ></path>
          </svg>
          <svg
            v-show="
              !checkedValue.includes(item.name || item.text || item.label)
            "
            t="1680232441416"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5287"
            width="16"
            height="16"
          >
            <path
              d="M806.4 213.333333H217.6a3.84 3.84 0 0 0-4.266667 4.266667v588.8a3.84 3.84 0 0 0 4.266667 4.266667h588.8a3.84 3.84 0 0 0 4.266667-4.266667V217.6a3.84 3.84 0 0 0-4.266667-4.266667zM853.333333 849.066667a4.693333 4.693333 0 0 1-4.693333 4.693333H174.933333a4.693333 4.693333 0 0 1-4.693333-4.693333V174.933333a4.693333 4.693333 0 0 1 5.12-4.266666H849.066667a4.693333 4.693333 0 0 1 4.693333 4.693333z"
              p-id="5288"
              fill="#cdcdcd"
            ></path>
          </svg>
          {{ item.text || item.label || item.name || '' }}
        </li>
      </ul>
      <ul class="list-group tac">
        <li style='width:100%; ' class="mb4 li-btn">
          <el-button @click="cancel" size="small">取消</el-button>
          <el-button @click="submit" size="small" type="primary">
            确定</el-button
          >
        </li>
      </ul>
    </div>
  </span>
</template>
<script setup>
import { ClickOutside as vClickOutside } from 'element-plus'
const emit = defineEmits(['change']);
import throttle from 'lodash/throttle'
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  }
});
const dom = ref(null)
const icon = ref()
const filterValue = ref('')

const handleOutSide = (e)=>{
    if(show.value ){
        const  outArea1 = icon.value.getBoundingClientRect()
        const  outArea2 = dom.value.getBoundingClientRect()
        if(e.clientX < outArea2.left || e.clientY > outArea2.bottom || e.clientX > outArea2.right){
            // 左 下 右
           show.value  = false 
        }
        if(e.clientY < outArea2.top ){ // 上 考虑图标区域
            if(e.clientY <outArea1.top ){ // setting 图标上面
               show.value  = false 
            }
            else{
                if(e.clientX <outArea1.left || e.clientX > outArea1.right){
               show.value  = false 
                } 
            }
        }


    }
}
onMounted(()=>{
   window.addEventListener("click", handleOutSide,{passive: true})
})
onUnmounted(()=>{
   window.removeEventListener("click", handleOutSide,{passive: true})
})
const checkedValue = ref([]);
import { nextTick, onMounted } from 'vue';
const hash = window.location.hash || window.location.pathname;
const originData =
  JSON.parse(localStorage.getItem(hash)) ||
  props.columns.map((item) => item.name || item.text || item.label);
nextTick(() => {
    created()
});
const created = ()=>{
 if (localStorage.getItem(hash)) {
    checkedValue.value = JSON.parse(localStorage.getItem(hash));
  } else {
    checkedValue.value = props.columns.map(
      (item) => item.name || item.text || item.label
    );
  }
}
const show = ref(false);
const trigger = throttle(() => {
  filterValue.value = '';
  show.value = !show.value;
  if(show.value){created()}
},200)
const cancel = () => {
  checkedValue.value = originData;
  trigger();
};
const handleClick = (item) => {
  if (checkedValue.value.includes(item.name || item.text || item.label)) {
    checkedValue.value = checkedValue.value.filter(
      (_) => _ !== (item.name || item.text || item.label)
    );
  } else {
    checkedValue.value.push(item.name || item.text || item.label);
  }
};
const selectAll = ()=>{
    if(props.columns.length === checkedValue.value.length){
         checkedValue.value = []
    }else {
      filterValue.value = '';
        checkedValue.value = props.columns.map(item=> item.name || item.text || item.label)
    }
}
const submit = () => {
  if (checkedValue.value.length < 1) {
    window.ElMessage({
      type: 'warning',
      message: '至少选择一条数据'
    });
    return;
  }
  localStorage.setItem(hash, JSON.stringify(checkedValue.value));
  const data = props.columns.filter((item) =>
    checkedValue.value.includes(item.name || item.text || item.label)
  );
  emit('change', data);
  trigger();
};
</script>
<style scoped lang="scss">
.set-table-check-all {
  width: fit-content;
  min-width: 160px;
  padding: 2px 10px;
  border-bottom: 1px solid #e4e4dd;
  &:hover {
    border-bottom-style: dashed;
    background: var(--el-fill-color-light);
  }
}
.set-table-select {
    top:20px;
  background: #fff;
  height: 300px;
  z-index: 123;
  right: 0px;
  width: max-content;
  border: 1px solid #d1dbe5;
  box-shadow: 2px 3px 3px 0px #d1dbe5;
  color: #333;
  & li {
    // width: fit-content;
    min-width: 160px;
    padding: 2px 10px;
    &:not(.li-btn):hover {
      background: var(--el-fill-color-light);
    }
  }
}
</style>
